<template>
  <div class="hello">
    <h1>Grid测试页</h1>
    <!--<data-grid style="height: 400px;" :config="config"></data-grid>-->
    <!--<column-filter :config="config1" :columns="config1.columns"></column-filter>-->
    <data-grid id="test1" style="height: 400px;" :config="config1"></data-grid>
  </div>
</template>

<script>
  import _ from 'lodash'
  import Promise from 'promise'
  import DataGrid from '../../libs/data-grid'
  import ColumnFilter from '../../libs/data-grid/columnFileter/ColumnFilter.vue'
  export default {
    components: {DataGrid, ColumnFilter},
    data () {
      return {
        config: {
          selectionNotEqualsChecking: true,
//          selectionMultiple: true,
          headerHeights: [30, 30, 30],
          columns: [
            {
              field: 'f',
              title: 'f',
              resizable: true,
              fixed: 'left',
              subColumns: [
                {
                  field: 'f1211',
                  title: 'f1211',
                  checkbox: true,
                  checkAll: true,
//                  hide: true,
                  headerStyle: {background: '#ff0000'},
                  resizable: true
                },
                {
                  field: 'f1221',
                  title: 'f1221',
                  hide: true,
                  resizable: true
                }
              ]
            },
            {
              field: 'f1',
              title: 'f1',
              subColumns: [
                {
                  field: 'f11',
                  title: 'f11',
                  width: 500,
                  resizable: true
                },
                {
                  field: 'f12',
                  title: 'f12',
                  resizable: true,
                  subColumns: [
                    {
                      field: 'f121',
                      title: 'f121',
                      width: 500,
                      resizable: true
                    },
                    {
                      field: 'f122',
                      title: 'f122',
                      resizable: true
                    }
                  ]
                }
              ]
            },
            {
              field: 'b1',
              title: 'b1',
              fixed: 'right',
              subColumns: [
                {
                  field: 'b11',
                  title: 'b11',
                  width: 100,
                  resizable: true
                }
              ]
            }
          ],
          titleVerticalAlign: 'bottom',
          dataSource1: [],
          dataSource: (pageIndex, pageSize) => {
            return new Promise((resolve, reject) => {
              setTimeout(() => {
                let obj = {
                  f: 1,
                  f11: 2,
                  f121: 3,
                  f122: 4,
                  b11: 5,
                  b12: 6
                }
                let ds = []
                for (let i = 0; i < 100; i++) {
                  let o = _.clone(obj)
                  o.f1211 = i + (pageIndex - 1) * 100
                  ds.push(o)
                }
                resolve({data: ds, totalCount: 1000})
              }, 3000)
            })
          },
          pagination: {
            pageSizeList: [10, 20, 30]
          }
        },
        config1: {
          selectionNotEqualsChecking: true,
//          selectionMultiple: true,
          headerHeights: [30, 30, 30],
          rowHeight: 35,
          columns: [
            {
              field: 'f1',
              title: '我的测试列1',
              resizable: true,
              fixed: 'left',
              sortable: true,
              disableHidden: true
            },
            {
              field: 'f2',
              title: '我的测试列2',
              width: 600,
              disableHidden: true,
              subColumns: [
                {
                  field: 'f11',
                  title: 'f11',
                  width: 330,
                  subColumns: [
                    {
                      field: 'f111',
                      title: 'f111',
                      width: 130,
                      disableHidden: true,
                      resizable: true
                    },
                    {
                      field: 'f112',
                      title: 'f112',
                      width: 200,
                      resizable: true
                    }
                  ],
                  resizable: true
                },
                {
                  field: 'f12',
                  title: 'f12',
                  resizable: true,
                  width: 400,
                  subColumns: [
                    {
                      field: 'f121',
                      title: 'f121',
                      width: 200,
                      resizable: true
                    },
                    {
                      field: 'f122',
                      title: 'f122',
                      width: 200,
                      resizable: true
                    }
                  ]
                }
              ],
              resizable: true
            },
            {
              field: 'f3',
              title: '我的测试列3',
              width: 300,
              sortable: true,
              resizable: true
            },
            {
              field: 'f4',
              title: '我的测试列4',
              width: 200,
              resizable: true
            },
            {
              field: 'f333',
              title: '我的测试列22',
              width: 200,
              resizable: true
            },
            {
              field: 'f3333',
              title: '我的测试列3333',
              width: 300,
              resizable: true
            },
            {
              field: 'f44444',
              title: '我的测试列4896',
              width: 200,
              resizable: true
            },
            {
              field: 'f5',
              title: '我的测试列5',
              fixed: 'right',
              resizable: true,
              cellTemplate: '<button @click="edit($event, data.data)">Hello:{{data.data.f5}}</button>',
              context: {
                edit (evt, data) {
                  evt.preventDefault()
                  evt.stopPropagation()
                  console.log(this, 'in edit', data)
                }
              }
            }
          ],
          titleVerticalAlign: 'bottom',
          dataSource1: [],
          dataSource: (pageIndex, pageSize, field, order) => {
            return new Promise((resolve, reject) => {
              setTimeout(() => {
                let obj = {
                  f1: 1,
                  f2: 2,
                  f3: 3,
                  f4: 4,
                  f5: 5,
                  f111: 'f111',
                  f112: 'f112',
                  f122: 'f122',
                  f121: 'f121'
                }
                let ds = []
                for (let i = 0; i < 100; i++) {
                  let o = _.clone(obj)
                  o.f1 = i + (pageIndex - 1) * 100
                  ds.push(o)
                }
                resolve({data: ds, totalCount: 1000})
              }, 1000)
            })
          },
          pagination: {
            pageSizeList: [10, 20, 30]
          }
        }
      }
    },
    mounted () {
      window.a = this
    }
  }
</script>

<style>

</style>
